<template>
	<view class="icon-hidden-page">
		<Tips title="小贴士" :des="des"/>
		<view class="switch-blcok">
			<view class="label">孩子端桌面图标隐藏</view>
			<switch class="switch-button"  :checked ="checked" @change="onChange" style="transform:scale(1)"  color="#07c160" active-color="#f7fbfe" :disabled="disabled"/>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, computed, onMounted } from 'vue'
	import Tips from "@/components/tips/index.vue"
	import { homeServer } from '@/common/index'
	import { useStudentListStore } from "@/stores/useStudentList.js"
	const studentStore = useStudentListStore();
	const curStd = computed(() => studentStore.currentStudent);
	
	const des = ref([
		'当家长开启此功能，孩子手机上的学生端App图标将会隐藏起来。关闭及显示正常图标',
		'oppo, vivo 隐藏时更换为计算器图标，名字为计算器',
		'小米，华为手机直接隐藏图标',
		'解绑后将显示图标，如遇到图标未隐藏，可以点击图标打开应用即可隐藏'
	])
	
	const loading = ref(true);
	const checked = ref(null);
	const disabled = ref(false); // todo 孩子图标暂时隐藏调掉
	// 获取状态
	const getStudentIconStatus = async () => {
		const studentId = curStd.value?.id;
		if(studentId){
			try{
				const {status, data} = await homeServer.getStudentIconStatus({studentId})
				if(status === '200'){
					//	图标状态(1:显示,2:隐藏)
					checked.value = Number(data) === 1 ? true : false
					loading.value = false;
				}
			}catch(e){
				console.log(e)
				//TODO handle the exception
			}
		} else {
			console.log("在隐藏图标页面，未找到学生id")
		}
	}
	
	
	const onChange = async ({detail}) => {
		checked.value = detail.value
		loading.value = true;
		const studentId = curStd.value?.id;
		const subIconSwitch = detail.value=== true ? 1 : 2
		try{
			const {status} = await homeServer.updateStudentIconStatus({studentId, subIconSwitch});
			if(status === '200'){
				uni.showToast({
					title:"修改成功",
					icon:"success",
					success() {
						getStudentIconStatus()
					}
				})
			}
		}catch(e){
			uni.showToast({
				title:"修改失败",
				icon:"fail"
			})
			console.log(e)
			//TODO handle the exception
		}
		loading.value = false;
	}
	
	onMounted(() => {
		getStudentIconStatus()
	})
	
	


</script>
<style>
	page{
		background-color: #f7fbfe;
	}
</style>

<style lang="scss" scoped>
	.icon-hidden-page{
		padding: 0 20upx;
		.switch-blcok{
			background-color: #FFFFFF;
			padding: 20upx 30upx;
			margin-bottom: 40upx;
			margin-top: 40upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.label{
				font-size: 36upx;
			}
			.switch-button{}
		}
		// .tips{
		// 	width: 100%;
		// 	height: 300upx;
		// 	background: linear-gradient( 180deg, #FEFCEB 0%, #FFFFFF 100%);
		// 	border: 1px solid #FFFFFF;
		// 	padding: 20upx;
		// 	position: relative;
		// 	.fix-tip-icon{
		// 		position: absolute;
		// 		right: 50upx;
		// 		top: 10upx;
		// 	}
		// 	.title{
		// 		font-weight: 800;
		// 		font-size: 28upx;
		// 		color: #081A2A;
		// 		text-align: center;
		// 		padding:20upx 0 80upx 0;
		// 	}
		// 	.txt{
		// 		text-align: center;
		// 		font-weight: 400;
		// 		font-size: 24upx;
		// 		color: #6F410C;
		// 	}
		// }
	}
</style>